<template>
    <div class="patient_cell mt10 b5 ml5 mr5 bg_ff" @click="() => { this.$emit('click', patientData) }">
        <div class="patient_cell_content">
            <div class="row_space_between top_content pb10 mb10">
                <span class="clr_2b3 f18 fw500 row_start">
                    <div class="sortClass">{{ getSortNumber }}</div>
                    <div class="mr5 mW60 tl">{{ patientData.PatientName }}</div>
                    <span class="mr5">{{ patientData.PatientSex }}</span>
                    <span class="mr5">{{ patientData.PAge }}</span>
                </span>
                <span>
                    <span class="mr5 f12 pl5 pr5 b2 h18 enhanceClass" v-if="patientData.IsEnhancement == '1'">增强</span>
                    <span class="mr5 f12 pl5 pr5 b2 h18" :class="patientClassStyle">{{ patientData.PatientType }}-{{
        patientData.DeptPatientType }}</span>
                    <!-- <span class="mr5 f12 pl5 pr5 b2 clr_fff  h18"
                        :class="{ bg_909: patientData.OrderState != '已登记', bg_1cb: patientData.OrderState == '已登记' }">{{
        patientData.OrderState }}</span> -->
                </span>
            </div>
            <div class="pl10 pr10">
                <div class="clr_2b3 mt10 mb10 f14 fw500  row_space_between_top">
                    <span class="tl W50"> {{ patientData.ExamType }}|{{ patientData.AllExamItems }}|{{
        patientData.ExamBodyPart }} </span>

                    <span class="W50 tl">{{ patientData?.ExamBeginDate }}</span>
                </div>
                <div class="row_space_between_top clr_66 mb5 f14">
                    <span class="mr5 W50 tl">检查号：{{ patientData.AccessionNumber }}</span>
                    <span class="mr5 W50 tl">病历号：{{ patientData.MedrecNo }}</span>
                </div>
                <div class="row_space_between_top clr_66 f14">
                    <span class="mr5 W50 tl">住院号：{{ patientData.in_patient_no }}</span>
                    <span class="mr5 W50 tl">检查机房：{{ patientData.ExamRoom }}</span>
                </div>
            </div>
            <div class="c-state-info row" ref="stateInfo" v-if="topList.length>0">

                <div class="left row">
                    <div class="c-state-info-item row-start-start" v-for="(item, index) in topList.slice(0,topList.length-1)" :key="index">
                        <div class="title">
                            <i class="iconfont clr_1cb"
                                v-if="currentState >= item.state">&#xe8b0;</i>
                            <i class="iconfont" v-else>&#xe8af;</i>
                            <span class="ml2"
                                :class="{ clr_1cb: currentState  >= item.state }"
                                >{{ item.name }}</span>
                            
                        </div>
                        <div class="line" :class="{ 'green_line': currentState  >= item.state }">
                        </div>
                    </div>

                </div>
                <div class="title">
                    <i class="iconfont clr_1cb" v-if="currentState >=topList[topList.length-1].state">&#xe8b0;</i>
                    <i class="iconfont" v-else>&#xe8af;</i>
                    <span
                        :class="{ clr_1cb: currentState >=topList[topList.length-1].state }"
                        class="ml4">{{ topList[topList.length-1].name }}</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    data() {
        return {
           
            topList: [
               
                {
                    name: '签到',
                    code: '1100',
                    state: 1100,

                },
                {
                    name: '打针',
                    code: '1110',
                    state: 1110,
                },
                {
                    name: '接管',
                    code: '1120',
                    state: 1120,
                },
                {
                    name: '摄片',
                    code: '1130',
                    state: 1130,
                },
                {
                    name: '取袋',
                    code: '1140',
                    state: 1140,
                },
                {
                    name: '拔针',
                    code: '1150',
                    state: 1150,
                },
            ],
             //增强
            topEnhancementList: [
               
               {
                   name: '签到',
                   code: '1100',
                   state: 1100,

               },
               {
                   name: '打针',
                   code: '1110',
                   state: 1110,
               },
               {
                   name: '接管',
                   code: '1120',
                   state: 1120,
               },
               {
                   name: '摄片',
                   code: '1130',
                   state: 1130,
               },
               {
                   name: '取袋',
                   code: '1140',
                   state: 1140,
               },
               {
                   name: '拔针',
                   code: '1150',
                   state: 1150,
               },
           ],
            //普通
            topListNormal:[

            {
                    name: '签到',
                    code: '1100',
                    state: 1100,

                },
                {
                    name: '摄片',
                    code: '1130',
                    state: 1130,
                },
                {
                    name: '取袋',
                    code: '1140',
                    state: 1140,
                },
                
            ],
        };
    },
    props: {
        patientData: {
            type: Object,
        },
        index: {
            type: Number
        },
    },
    computed: {
        patientClassStyle() {
            if (this.patientData.PatientType == '急诊') {
                return 'clr_ff0 b_clr_ff0'
            } else if (this.patientData.PatientType == '住院') {
                return 'clr_1c8 b_clr_1c8'
            } else {
                return 'clr_999 b_clr_999'
            }
        },
        patientClassDesc() {
            if (this.patientData.PatientType == '3000') {
                return '急诊-III级'
            } else if (this.patientData.PatientType == '2000') {
                return '住院-普通'
            } else {
                return '门诊-普通'
            }
        },
        currentState(){
            console.log('数据对面?==',parseInt(this.patientData.PatientVerifyFlag));
            return parseInt(this.patientData.PatientVerifyFlag)
        },
        confirmState() {
            return this.patientData.state == 1 ? '已确认' : '未确认'
        },
        getSortNumber() {
            if (this.index < 9) {
                return '00' + `${this.index+1}`
            } else if (this.index < 99) {
                return '0' + `${this.index+1}`
            } else {
                return this.index+1
            }
        },
    },
    watch: {
        patientData:{
            handler(val){
                if(val){
                        this.topList = val.IsEnhancement==1 ? this.topEnhancementList : this.topListNormal
                }
            },
        }
    },
    methods: {


    },
}
</script>
<style lang='less' scoped>
.row-start-start {
    display: flex;
    align-items: center;
    justify-content: start;
}
.c-state-info {
    
  padding: 0 10px;
  margin-top: 10px;
  width: calc(100% - 20px);
  height: 30px;
  font-size: 13px;
  background-color: #F6F6F6;

  .left {
    width: calc(100% - 50px);
    flex: 1;

  }

  .c-state-info-item {
    // width:100px;
    width: 100%;

  }

  .title {
    padding-left: 5px;
    font-size: 13px;
    line-height: 30px;
    height: 30px;
    width: 45px;
    color: #909399;

    i {
      width: 12px;
    }

    .iconfont {
      font-size: 13px;
      width: 13px;
      height: 13px;
    }
  }

  .line {
    height: 1px;
    width: calc(100% - 45px);
    border-bottom: 1px solid #C0C4CC;

  }

  .green_line {
    border-bottom: 1px solid #1CB54A;

  }
}
.enhanceClass {
    background: rgba(10, 112, 176, 0.2);
    color: #0A70B0;
}

.patient_cell_content {
    padding-top: 10px;
}

.sortClass {
    width: 35px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
    background: #EBEEF5;
    border-radius: 0 4px 4px 0;
    margin-right: 5px;
}

.mW60 {
    max-width: 130px;
    // width: 100px;
    height: 26px;
    overflow: hidden;
}

.row_start {
    display: flex;
    justify-content: start;
    align-items: center;
}

.row_space_between_top {
    display: flex;
    justify-content: start;
    align-items: flex-start;
}

.patient_cell {
    // padding-top: 20px;
    // padding-left: 10px;
    // padding-right: 10px;

    .top_content {
        border-bottom: 4px dotted #f5f5f5;
        // background-image: linear-gradient(270deg, #F5F5F5 0%, #F5F5F5 100%);
    }
}
</style>